<template>

  <div class="main bg beauty-Scroll">
    <el-row class="header">
      <el-col :span="8">
        <dv-decoration-8 style="width:90%;height:50px;"/>
      </el-col>
      <el-col :span="8">
        <dv-decoration-5 style="width:100%;height:40px;margin-top: 30px"/>
      </el-col>
      <el-col :span="8">
        <dv-decoration-8 :reverse="true" style="width:90%;height:50px;float:right"/>
      </el-col>
      <div class="center-title ">互联网招聘实时监控</div>
    </el-row>
    <el-row class="middle">
      <el-col :span="7" class="middle-left">
        <el-row class="setting">
          <dv-border-box-12>
            <socketHandler></socketHandler>
          </dv-border-box-12>
        </el-row>
        <el-row class="data">
          <dv-border-box-12>
            <el-row class="data-Container">
              <el-col :span="8" class="data-box">
                <b class="b-title">实时招聘量</b>
                <dv-digital-flop :config="{number:[parseInt(this.data.base.positionCount)],content:'{nt}'}"
                                 style="width:100%;height:60px"/>
              </el-col>
              <el-col :span="8" class="data-box">
                <b class="b-title">实时企业数</b>
                <dv-digital-flop :config="{number:[parseInt(this.data.base.companyCount)],content:'{nt}'}"
                                 style="width:100%;height:60px"/>
              </el-col>
              <el-col :span="8" class="data-box">
                <b class="b-title">实时平均薪资</b>
                <dv-digital-flop :config="{number:[parseInt(this.data.base.salaryAvg)],content:'{nt}'}"
                                 style="width:100%;height:60px"/>
              </el-col>
            </el-row>
          </dv-border-box-12>
        </el-row>
        <el-row class="chart">
          <el-col class="bar-chart" :span="12">
            <dv-border-box-12>
              <el-row class="title">
                <b>开发语言招聘量</b></el-row>
              <el-row class="content">
                <dv-scroll-ranking-board :config="this.data.positionByLanguage | positionByLanguageFilter"
                                         style="padding: 0px 20px 0 20px;width:100%;height:100%"/>
              </el-row>
            </dv-border-box-12>
          </el-col>
          <el-col class="pie-chart" :span="12">
            <dv-border-box-12>
              <el-row class="title">
                <b>开发语言讨论量</b></el-row>
              <el-row class="content">
                <language-counts style="padding: 15px 10px"></language-counts>
              </el-row>
            </dv-border-box-12>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="11" class="middle-center">
        <dv-border-box-8>
          <position-by-city v-bind:position-by-city="this.data.positionByCity"></position-by-city>
        </dv-border-box-8>
      </el-col>
      <el-col :span="6" class="middle-right">
        <el-row class="table">
          <dv-scroll-board :config="this.data.top5ByDistrict | top5Filter" style="width:100%;height:100%"/>
        </el-row>
        <el-row class="chart">
          <dv-border-box-12>
            <salary-by-work-year style="padding: 10px 10px"
                                 v-bind:salaryByWorkYear="this.data.salaryByWorkYear"></salary-by-work-year>
          </dv-border-box-12>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="footer">
      <el-col :span="6" class="line-chart">
        <dv-border-box-12>
          <position-by-salary style="padding: 15px 10px"
                              v-bind:position-by-salary="this.data.positionBySalary"
                              v-bind:company-by-size="this.data.companyBySize"></position-by-salary>
        </dv-border-box-12>
      </el-col>
      <el-col :span="6" class="chart-box">
        <dv-border-box-6 :color="['#2E6099', '#7BE3FA']">
          <el-row :gutter="20" style="padding: 15px;height: 100%">
            <el-col :span="12" class="chart-card">
              <el-row class="title">
                <b>知名企业数</b></el-row>
              <el-row class="content">
                <company-by-famous v-bind:company-by-famous="this.data.byFamous.companyByFamous"></company-by-famous>
              </el-row>
            </el-col>
            <el-col :span="12" class="chart-card">
              <el-row class="title">
                <b>知名企业薪资</b>
              </el-row>
              <el-row class="content">
                <salary-by-famous v-bind:salary-by-famous="this.data.byFamous.salaryByFamous"></salary-by-famous>
              </el-row>
            </el-col>
          </el-row>
        </dv-border-box-6>
      </el-col>
      <el-col :span="6" class="chart-box">
        <dv-border-box-6 :color="['#2E6099', '#7BE3FA']">
          <el-row :gutter="20" style="padding: 15px;height: 100%">
            <el-col :span="12" class="chart-card">
              <workyear-by-famous style="padding: 10px 10px"
                                  v-bind:workyear-by-famous="this.data.byFamous.workyearByFamous"></workyear-by-famous>
            </el-col>
            <el-col :span="12" class="chart-card">
              <position-by-education style="padding: 10px 10px"
                                     v-bind:position-by-education="this.data.positionByEducation"></position-by-education>
            </el-col>
          </el-row>
        </dv-border-box-6>
      </el-col>
      <el-col :span="6" class="word-cloud">
        <dv-border-box-12>
          <advantage-words style="padding: 15px 10px"
                           v-bind:advantage-words="this.data.advantageWords"></advantage-words>
        </dv-border-box-12>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {mapGetters} from 'vuex'
  import socketHandler from '../../components/SocketHandler'
  import companyLogo from '../../components/Echarts/newCompanyLogo'
  import baseData from '../../components/Echarts/baseData'
  import positionByLanguage from '../../components/Echarts/positionByLanguage'
  import languageCounts from '../../components/Echarts/newLanguageCounts'
  import positionBySalary from '../../components/Echarts/positionBySalary'
  import top5ByDistrict from '../../components/Echarts/top5ByDistrict'
  import salaryByWorkYear from '../../components/Echarts/salaryByWorkYear'
  import positionByEducation from '../../components/Echarts/positionByEducation'
  import advantageWords from '../../components/Echarts/advantageWords'
  import positionByCity from '../../components/Echarts/positionByCity'
  import companyByFamous from '../../components/Echarts/companyByFamous'
  import salaryByFamous from '../../components/Echarts/salaryByFamous'
  import workyearByFamous from '../../components/Echarts/workyearByFamous'

  export default {
    name: 'newDashboard',
    data() {
      return {
        data: {}

      }
    },
    filters: {
      positionByLanguageFilter(val) {
        if (!val[0]) {
          return {data: [{name: '暂无数据', value: 100}]}
        }
        console.info("positionByLanguage Changed");
        return {
          data: [
            {
              name: ' <div class="icon-java" style="font-size:16px"></div>', //java
              value: val[0] ? val[0] : 0
            },
            {
              name: '<div class="icon-php" style="font-size:16px"></div>',//php
              value: val[1] ? val[1] : 0
            },
            {
              name: '<div >C++</div>', //c++
              value: val[2] ? val[2] : 0
            },
            {
              name: '<div class="icon-ios" style="font-size:16px"></div>', //ios
              value: val[3] ? val[3] : 0
            },
            {
              name: '<div class="icon-icon--" style="font-size:17px"></div>', //php
              value: val[4] ? val[4] : 0
            },
            {
              name: '<div class="icon-java-script" style="font-size:16px"></div>', //js
              value: val[5] ? val[5] : 0
            }
          ]
        };
      },
      top5Filter(val) {

        let config = {
          header: ['地区', '招聘量', '企业数', '平均薪资'],
          data: array,
          headerBGC: 'rgba(44,82,153,0.3)',
          oddRowBGC: 'rgba(9,25,44,0.6)',
          evenRowBGC: 'rgba(1,36,68,0.6)',
          rowNum: 8,
          waitTime: 1500,
          align: ['center', 'center', 'center', 'center']
        };

        if (!val) {
          config.data = [["暂", "无", "数", "据"]];
          return config;
        }
        console.info("top5Table Changed");
        let array = [];
        val.forEach(object => {
          // array.push(Object.values(object)) //对象内数据乱序问题
          let item = [];
          item[0] = object["name"];
          item[1] = object['positionCount'];
          item[2] = object['companyCount'];
          item[3] = object['salaryAvg'];
          array.push(item)
        });

        config.data = array;
        return config
      }
    },
    methods: {
      //初始化data对象（假数据）
      initData() {
        console.info("initData");
        this.data = {
          companyLogo:
            ['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1782959667,617309577&fm=26&gp=0.jpg',
              'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1151834211,158545213&fm=26&gp=0.jpg',
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=581833926,2926585461&fm=11&gp=0.jpg',
              'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3190441126,995644236&fm=26&gp=0.jpg'],  // 20条Company-Logo URL
          base: {
            "positionCount": "1415", // int 职位总数
            "companyCount": "15",    // int 公司总数
            "salaryAvg": "14590"     // int 平均薪资，单位：元
          },
          positionByLanguage: [154, 15, 126, 153, 164, 123],      //int 6个元素分别对应Java，PHP，C++，iOS，Python,JavaScript
          languageCounts: [154, 15, 126, 153, 164, 123],          //int 5个元素分别对应: Java，PHP，C++，iOS，Python
          positionBySalary: [154, 15, 126, 153, 164, 123, 11], //int 7个元素分别对应: 5K以下、5-10K、10-15K、15-20K、20-25K、25-30K、30K+
          companyBySize: [123, 112, 333, 44, 21],            //int 分别对应：少于15人、15-50人、50-500人、500-2000人、2000人以上
          positionByCity: [
            {name: '北京', value: 190},
            {name: '广州', value: 180},
            {name: '上海', value: 170},
            {name: '招远', value: 12}   // 请将value从大到小排序，value相同的城市排序随机
          ],
          top5ByDistrict: [
            {name: '北京东城区', positionCount: 190, companyCount: 179, salaryAvg: 16800},
            {name: '广州西城区', positionCount: 180, companyCount: 179, salaryAvg: 16800},
            {name: '上海静安区', positionCount: 170, companyCount: 179, salaryAvg: 16800},
            {name: '上海西城区', positionCount: 150, companyCount: 179, salaryAvg: 16800},
            {name: '广州五羊区', positionCount: 140, companyCount: 179, salaryAvg: 16800},
            {name: '深圳五羊区', positionCount: 140, companyCount: 179, salaryAvg: 16800},
            {name: '上海静安区', positionCount: 170, companyCount: 179, salaryAvg: 16800},
            {name: '上海西城区', positionCount: 150, companyCount: 179, salaryAvg: 16800},
            {name: '广州五羊区', positionCount: 140, companyCount: 179, salaryAvg: 16800},
            {name: '深圳五羊区', positionCount: 140, companyCount: 179, salaryAvg: 16800},
            // 请将positionCount从大到小排序, positionCount相同的按照salaryAvg从小到大排序
          ],
          salaryByWorkYear: [6820, 12340, 13342, 23345, 28900, 38991], //int 6个元素分别对应: 不限、应届毕业生、 3年以下、 3-5年、5-10年、10年以上
          positionByEducation: [820, 140, 1342, 345],          //int 4个元素分别对应: 不限、大专、本科/硕士、博士
          advantageWords: [
            {name: '打卡灵活', value: 190},
            {name: '股票期权', value: 180},
            {name: '包三餐', value: 170},
            {name: '国企稳定', value: 12}   // 请将value从大到小排序，value相同的关键词排序随机
          ],
          byFamous: {
            companyByFamous: [123, 1125], //int 分别对应知名企业、非知名企业
            salaryByFamous: [12300, 14344], //int 分别对应知名企业、非知名企业，单位为元
            workyearByFamous: [
              [12, 34, 56, 77, 89, 45], //int 知名企业的6种workyear所对应的职位数，分别为：'不限', '应届', '3年以下', '3-5年', '5-10年', '10年+'
              [23, 21, 34, 56, 23, 42]  //int 非知名企业的6种workyear所对应的职位数，同上
            ]
          }
        };
      },

    },
    components: {
      socketHandler,
      companyLogo,
      baseData,
      positionByLanguage,
      languageCounts,
      positionBySalary,
      positionByCity,
      top5ByDistrict,
      salaryByWorkYear,
      positionByEducation,
      advantageWords,
      companyByFamous,
      salaryByFamous,
      workyearByFamous
    },
    created() {
      this.initData();

    },
    computed: {
      ...mapGetters([
        'socketMessage'
      ])
    },
    watch: {
      socketMessage: function () {
        this.data = this.socketMessage
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    background-color: #030409;
    min-width: 2000px;
    min-height: 900px;
    height: 100%;

    .header {
      height: 100px;

      .center-title {
        color: #fff;
        position: absolute;
        font-size: 30px;
        font-weight: 700;
        left: 50%;
        top: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
      }

    }


    .middle {
      height: 60%;

      .middle-left {
        height: 100%;

        .setting {
          height: 50px;
        }

        .data {
          height: 30%;
          min-height: 60px;
          color: white;

          .data-Container {
            display: flex;
            align-items: center;
            height: 100%;

            .data-box {
              display: flex;
              flex-direction: column;
              align-items: center;

              .b-title {
                margin-bottom: 1vh;
                font-size: 1.8vh;
              }
            }
          }
        }

        .chart {
          height: calc(70% - 50px);

          .bar-chart {
            height: 100%;

            .title {
              font-size: 18px;
              color: white;

              b {
                margin: 20px 0 10px 15px;
                display: inline-block;
              }
            }

            .content {
              height: calc(100% - 58px)
            }
          }

          .pie-chart {
            height: 100%;

            .title {
              font-size: 18px;
              color: white;

              b {
                margin: 20px 0 10px 15px;
                display: inline-block;
              }
            }

            .content {
              height: calc(100% - 58px)
            }
          }
        }
      }

      .middle-center {
        height: 100%;
      }

      .middle-right {
        height: 100%;

        .table {
          height: 60%;
          padding: 0 5px 5px 5px;
        }

        .chart {
          height: 40%;
        }
      }
    }

    .footer {
      height: calc(40% - 100px);

      .line-chart {
        height: 100%;
      }

      .chart-box {
        height: 100%;

        .chart-card {
          height: 100%;
          background-color: #09192C;
          background-clip: content-box;

          .title {
            font-size: 18px;
            color: white;

            b {
              margin: 10px 0 10px 10px;
              display: inline-block;
            }
          }

          .content {
            height: calc(100% - 38px)
          }
        }
      }

      .radar-chart {
        height: 100%;
      }

      .word-cloud {
        height: 100%;
      }
    }
  }

  .bg {
    background-image: url("../../assets/background/background.png");
    background-size: 100% 100%;
    -webkit-box-shadow: 0 0 3px #00f;
    box-shadow: 0 0 3px #00f;
    flex-direction: column;
  }
</style>
